<template>
  <div class="tm-data-editor">
    <div class="tm-data-editor--header">数据必须是一个标准json</div>
    <div class="tm-data-editor--body" ref="editor"></div>
    <div class="tm-data-editor--footer">
      <el-button type="default" @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TmDataEditor',
  props: {
    value: String
  },
  data() {
    let innerValue = this.value || '(function(){\n  return{\n    \n  }\n})();'
    return {
      innerValue
    }
  },
  methods: {
    init() {
      // console.log(CodeMirror.keyMap)
      // CodeMirror.defineExtension('autoFormatRange', function (from, to) {
      //   var cm = this
      //   var outer = cm.getMode(),
      //     text = cm.getRange(from, to).split('\n')
      //   var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state)
      //   var tabSize = cm.getOption('tabSize')

      //   var out = '',
      //     lines = 0,
      //     atSol = from.ch == 0
      //   function newline() {
      //     out += '\n'
      //     atSol = true
      //     ++lines
      //   }

      //   for (var i = 0; i < text.length; ++i) {
      //     var stream = new CodeMirror.StringStream(text[i], tabSize)
      //     while (!stream.eol()) {
      //       var inner = CodeMirror.innerMode(outer, state)
      //       var style = outer.token(stream, state),
      //         cur = stream.current()
      //       stream.start = stream.pos
      //       if (!atSol || /\S/.test(cur)) {
      //         out += cur
      //         atSol = false
      //       }
      //       if (
      //         !atSol &&
      //         inner.mode.newlineAfterToken &&
      //         inner.mode.newlineAfterToken(
      //           style,
      //           cur,
      //           stream.string.slice(stream.pos) || text[i + 1] || '',
      //           inner.state
      //         )
      //       )
      //         newline()
      //     }
      //     if (!stream.pos && outer.blankLine) outer.blankLine(state)
      //     if (!atSol) newline()
      //   }

      //   cm.operation(function () {
      //     cm.replaceRange(out, from, to)
      //     for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
      //       cm.indentLine(cur, 'smart')
      //   })
      // })
      var editor = CodeMirror(this.$refs.editor, {
        value: this.innerValue,
        lineNumbers: true,
        mode: 'javascript',
        keyMap: 'sublime',
        // extraKeys: {
        //   'Shift-Alt-F': function (editor) {
        //     CodeMirror.commands['selectAll'](editor)
        //     var range = { from: editor.getCursor(true), to: editor.getCursor(false) }
        //     editor.autoFormatRange(range.from, range.to)
        //   }
        // },
        autoCloseBrackets: true,
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai',
        tabSize: 2
      })
      editor.on('change', (instance) => {
        this.innerValue = instance.getValue()
      })
    },
    // autoFormatSelection() {
    //   CodeMirror.commands['selectAll'](editor)
    //   var range = { from: editor.getCursor(true), to: editor.getCursor(false) }
    //   editor.autoFormatRange(range.from, range.to)
    // },
    cancel() {
      this.$emit('cancel', 'cancel')
    },
    confirm() {
      this.$emit('confirm', this.innerValue)
    }
  },
  mounted() {
    setTimeout(() => {
      this.init()
    }, 300)
  }
}
</script>
